import { h, defineComponent, ref, watchEffect, computed } from 'vue';
import _ from 'lodash';
import Basic from './Basic.vue';
import TreeList from './TreeList.vue';
import TreeListOptsColumns from './TreeListOptsColumns.vue';
import TreeListLazyLoad from './TreeListLazyLoad.vue';
import TreeListLevel from './TreeListLevel.vue';
import TreeListPlain from './TreeListPlain.vue';
import Scrolling from './Scrolling.vue';
import 'devextreme/dist/css/dx.light.css';
export default defineComponent({
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    const model = ref('Scrolling');
    const selectOpts = [
      { label: 'Basic', value: 'Basic', Component: Basic },
      { label: 'TreeList', value: 'TreeList', Component: TreeList },
      {
        label: 'TreeListOptsColumns',
        value: 'TreeListOptsColumns',
        Component: TreeListOptsColumns,
      },
      {
        label: 'TreeListLazyLoad',
        value: 'TreeListLazyLoad',
        Component: TreeListLazyLoad,
      },
      {
        label: 'TreeListLevel',
        value: 'TreeListLevel',
        Component: TreeListLevel,
      },
      {
        label: 'TreeListPlain',
        value: 'TreeListPlain',
        Component: TreeListPlain,
      },
      {
        label: 'Scrolling',
        value: 'Scrolling',
        Component: Scrolling,
      },
    ];

    const selectedItem = computed(() => {
      return _.find(selectOpts, { value: model.value });
    })

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <t-select
              v-model={model.value}
              options={selectOpts}
            ></t-select>
          </div>
          <div class='block-'>
            <h5 class='title'>{selectedItem.value.label}</h5>
            {h(selectedItem.value.Component)}
          </div>
        </div>
      );
    };
  },
});
